<template>
  <!--提示-->
    <div
      class="tip"
      ref="tip"
      @mouseover="closeTimeout()"
      @mouseleave="openTimeout()">
      <p v-text="value"></p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                timeout: null,
                value: '操作提示',
                type: 'info',
                color: 'rgba(212, 212, 212, 0.6)'
            }
        },
        mounted() {
            this.alert(this.value,this.type)
        },
        methods: {
            alert(val,type){
                if (type == 'info') {
                    this.$refs.tip.style.color = 'rgba(212, 212, 212, 0.6)'
                } else if (type == 'warning') {
                    this.$refs.tip.style.color = 'rgba(179, 136, 18, 0.6)'
                } else if (type == 'success') {
                    this.$refs.tip.style.color = 'rgba(27, 169, 70, 0.6)'
                } else if (type == 'error') {
                    this.$refs.tip.style.color = 'rgba(180, 41, 41, 0.6)'
                }
                this.trigger ()
            },
            trigger () {
                this.closeTimeout()
                let targetWidth = 15 * (this.value == null? 0:this.value.length)
                if (targetWidth > 30 && targetWidth < 300) {
                    this.$refs.tip.style.width = targetWidth + "px"
                } else if (targetWidth >= 300) {
                    this.$refs.tip.style.width = "300px"
                } else {
                    this.$refs.tip.style.width = "30px"
                }
                setTimeout(() => {
                    this.$refs.tip.style.transform="scale(1.3)"
                }, 1)

                setTimeout(() => {
                    this.$refs.tip.style.transform="scale(1)"
                }, 200)

                this.timeout = setTimeout(() => {
                    this.$refs.tip.style.transform="scale(0)"
                }, 2200)
            },
            closeTimeout () {
                this.timeout && clearTimeout(this.timeout)
            },
            openTimeout () {
                this.timeout = setTimeout(() =>{
                    this.$refs.tip.style.transform="scale(0)"
                }, 2000)
            }
        }
    }
</script>

<style scoped>
  .tip {
    font-weight: bolder;
    cursor: pointer;
    width: 80px;
    padding: 5px 5px;
    border-radius: 3px;
    word-wrap: break-word;
    position: fixed;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    overflow: hidden;
    background-color: #161b22;
    backdrop-filter: blur(1px) brightness(75%) ;
    transform: scale(0);
    transition: 0.2s;
    z-index: 9999;
  }
  .tip span,p {
    user-select:none;
  }
  .tip p {
    user-select:text;
    cursor: default;
    margin: 3px 0;
    font-size: 13px;
    font-weight: bolder;
    letter-spacing: 0px;
  }
  /*.info {*/
  /*  color: rgba(212, 212, 212, 0.6);*/
  /*}*/
  /*.warn {*/
  /*  color: rgba(179, 136, 18, 0.6);*/
  /*}*/
  /*.success {*/
  /*  color: rgba(27, 169, 70, 0.6);*/
  /*}*/
  /*.error {*/
  /*  color: rgba(180, 41, 41, 0.6);*/
  /*}*/
</style>
